<template>
  <div class="test-page">
    <h1>测试页面</h1>
    <p>如果您看到这个页面，说明路由工作正常。</p>
    <p>当前时间: {{ currentTime }}</p>
    <el-button @click="goToLogin">去登录页</el-button>
    <el-button @click="testAPI">测试API</el-button>
    
    <div v-if="apiResult" class="api-result">
      <h3>API测试结果:</h3>
      <pre>{{ apiResult }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { authAPI } from '../api/auth'

const router = useRouter()
const currentTime = ref('')
const apiResult = ref('')

const updateTime = () => {
  currentTime.value = new Date().toLocaleString()
}

const goToLogin = () => {
  router.push('/login')
}

const testAPI = async () => {
  try {
    const response = await authAPI.getUserSuggestions()
    apiResult.value = JSON.stringify(response, null, 2)
  } catch (error) {
    apiResult.value = `错误: ${error.message}`
  }
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})
</script>

<style scoped>
.test-page {
  padding: 20px;
}

.api-result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
